(setq web-mode-enable-current-element-highlight t)
(setq web-mode-enable-current-column-highlight t)

(require 'web-mode)

;; EcmaScript Modules
(add-to-list 'auto-mode-alist '("\\.mjs\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.json\\'" . web-mode))

;; plain html
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))

;; svelte support
(add-to-list 'auto-mode-alist '("\\.svelte\\'" . web-mode))
(setq web-mode-engines-alist
      '(("svelte" . "\\.svelte\\'")
	("html" . "\\.html?\\'")))


(defun my-web-mode-hook ()
  "Hooks for Web mode."
  (message "web-mode hook.")
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2)
  (setq web-mode-style-padding 1)
  (setq web-mode-script-padding 1)
  (setq web-mode-block-padding 0)

  (setq web-mode-enable-auto-pairing t)
  (setq web-mode-enable-css-colorization t)
  (setq web-mode-enable-block-face t)
  ;; (setq web-mode-enable-part-face t)

  (setq web-mode-enable-comment-interpolation t)

  
  (set-face-foreground 'web-mode-html-tag-face "goldenrod")
  (set-face-foreground 'web-mode-html-attr-name-face "tomato")
  (set-face-foreground 'web-mode-html-attr-value-face "LightGreen")
  (set-face-foreground 'web-mode-current-element-highlight-face "DarkOrange")
  (setq web-mode-enable-html-entities-fontification t)
  )
(add-hook 'web-mode-hook  'my-web-mode-hook)
